<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_员工列表练习</title>
</head>
<body>
<input type="text" placeholder="请输入员工姓名" id="name">
<input type="text" placeholder="请输入员工工资" id="salary">
<input type="text" placeholder="请输入员工岗位" id="job">
<button onclick="add()">添加员工</button>
<hr>
<table border="1">
    <caption>员工列表</caption>
    <tr>
        <th>员工姓名</th>
        <th>员工工资</th>
        <th>员工岗位</th>
    </tr>
</table>

<script>
    function add() {
        let name = document.querySelector("#name").value;
        let salary = document.querySelector("#salary").value;
        let job = document.querySelector("#job").value;
        if(!name || !salary || !job){
            alert("请填写完整信息")
            return;
        }
        let trE = document.createElement("tr");
        let nameTd = document.createElement("td");
        let salaryTd = document.createElement("td");
        let jobTd = document.createElement("td");

        nameTd.innerHTML = name;
        salaryTd.innerHTML = salary;
        jobTd.innerHTML = job;

        trE.append(nameTd,salaryTd,jobTd);
        document.querySelector("table").append(trE);

        document.querySelector("#name").value = "";
        document.querySelector("#salary").value = "";
        document.querySelector("#job").value = "";
    }
</script>


</body>
</html>














































